<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        .root{
            list-style: none;
        }

        .root>li>img {
            width: 200px;
            float: left;
        }

        li {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <ul class="root">

    </ul>
    <script>
        let root = document.querySelector('.root')
        const innerHeight = window.innerHeight
        const eleHeight = root.clientHeight

        const movielist = [{
                title: '还是觉得你最好',
                src: 'https://pic.maizuo.com/usr/movie/abda2a3b3a3d6734e22ad7430b5e2854.jpg?x-oss-process=image/quality,Q_70',
                score: 7.7
            },
            {
                title: '哥，你好',
                src: 'https://pic.maizuo.com/usr/movie/f85b53cad68c6c0c2cba934107f2199e.jpg?x-oss-process=image/quality,Q_70',
                score: 7.9
            },
            {
                title: '还是觉得你最好',
                src: 'https://pic.maizuo.com/usr/movie/5b5400f760e89d1ae725f6b67b95ba3a.jpg?x-oss-process=image/quality,Q_70',
                score: 9.9
            },
        ]
        renderHTML()
        renderHTML()

        function renderHTML(){
            movielist.forEach(item=>{
                let li = document.createElement('li')
                let img = document.createElement('img')
                let div = document.createElement('div')
                let div2 = document.createElement('div')
                div.innerHTML = `${item.title}`
                div2.innerHTML = `${item.score}`
                img.src = `${item.src}`
                li.appendChild(img)
                li.appendChild(div)
                li.appendChild(div2)
                root.appendChild(li)
            })
        }
        
        window.onscroll = ()=>{
            if(innerHeight+document.documentElement.scrollTop+5>eleHeight){
                // renderHTML()
                console.log(innerHeight,eleHeight);
            }
        }
    </script>
</body>
</html>